<template>
    <div class="real">
        <p class="tit">实名认证后只能添加本人的银行卡</p>
        <div class="item">
            <p class="p1">姓名:</p>
            <input type="text"
                   placeholder="请输入持卡人姓名"
                   v-model="name"
            >
        </div>
        <div class="item">
            <p class="p1">身份证号:</p>
            <input placeholder="请输入身份证号"
                   v-model="id_number"
                   pattern="[0-9]*"
                   type="number"
            >
        </div>
        <div class="item">
            <p class="p1">银行卡号:</p>
            <input placeholder="请输入银行卡号"
                   v-model="bankCard"
                   pattern="[0-9]*"
                   type="number"
            >
        </div>
        <div class="item">
            <p class="p1">银行:</p>
            <p class="p2">{{bankName}}</p>
        </div>
        <div class="item">
            <p class="p1">手机号:</p>
            <input placeholder="请输入银行预留手机号"
                   v-model="phone"
                   pattern="[0-9]*"
                   type="number"
            >
        </div>
        <div class="btn-db">
            <button-normal
                    widthPro="200"
                    heightPro="35"
                    textBtn="确认信息"
                    color="#fff"
                    size="14"
                    @click.native="sure"
            ></button-normal>
        </div>
    </div>
</template>
<div>
</div>
<script>
    import buttonNormal from '../components/common/buttonNormal';
    import {Toast} from 'vant';

    export default {
        /**
         * 实名认证 addBank
         * name    否    姓名(第一次绑卡必填)
         id_number    否    身份证号(第一次绑卡必填)
         phone    是    银行柜台预留手机号
         bank    是    银行id
         card    是    卡号
         */
        name: "real_auth",
        components: {buttonNormal},
        data() {
            return {
                name: '', // 姓名
                id_number: '', // 身份证号
                bankCard: '', // 银行卡号
                phone: '', // 手机号
                bankName: '银行名'
            };
        },
        created() {
        },
        methods: {
            sure() {
                //    实名认证/添加银行卡
                let msg = '';
                let id_number_test = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; //身份证正则
                if (!this.name) {
                    msg = '持卡人名称填写错误';
                } else if (!id_number_test.test(this.id_number)) {
                    msg = '身份证号填写错误';
                } else if (!this.bankCard) {
                    msg = '银行卡号填写错误';
                }
                if (msg) {
                    Toast(msg);
                    return false;
                }
            }
        },

    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .real {
        flex-y()
        width 100vw
        .tit {
            padding 0 cellPadding
            word-vw(12px, gray9)
            width 100%
            box-sizing border-box
            line-height vw(32)
        }
        .btn-db {
            position absolute
            width 100vw
            bottom 0
            background white
        }
        .item {
            flex-x()
            width 100%
            background white
            height vw(50)
            padding 0 cellPadding
            box-sizing border-box
            .p1 {
                padding-right 2vw
            }
            .p2 {
                word-vw(14px, gray9)
                flex 1
            }
            input {
                flex 1
            }
        }
        ::-webkit-input-placeholder {
            word-vw(14px, gray9)
        }
    }
</style>